<%--
  Created by IntelliJ IDEA.
  User: ljh
  Date: 2024/10/29
  Time: 20:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored ="false" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%@ include file="partials/_start.jsp" %>

<!-- 在 head 部分添加 cherry-markdown 的 CSS 和 JS 文件 -->
<link rel="stylesheet" href="vendor/cherry-markdown-0.8.49/dist/cherry-markdown.min.css">
<script src="vendor/cherry-markdown-0.8.49/dist/cherry-markdown.min.js"></script>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>更新博客</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Blank Page</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

        <!-- Default box -->
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">填写新的博客信息</h3>
            </div>
            <!-- /.card-header -->
            <!-- form start -->
            <form method="post" action="admin-blog-edit" enctype="multipart/form-data">
                <input type="hidden" name="id" value="${blog.id}"/>
                <div class="card-body">
                    <div class="form-group">
                        <label for="title">博客标题</label>
                        <input type="text" class="form-control" id="title" name="title" value="${blog.title}" placeholder="请输入博客标题" required>
                    </div>
                    <div class="form-group">
                        <label for="content">博客内容</label>
                        <textarea class="form-control" name="content" id="content" cols="30" rows="10" style="display: none;">${fn:escapeXml(blog.content)}</textarea>
                        <div id="markdown-container" style="height:600px"></div>
                    </div>
                    <div class="form-group">
                        <label for="cover">博客封面图（选填）</label>
                        <c:if test="${not empty blog.cover}">
                            <div class="mb-2">
                                <img src="${pageContext.request.contextPath}/${blog.cover}"
                                     alt="当前封面图" style="max-width: 200px; max-height: 200px;">
                            </div>
                        </c:if>
                        <input type="file" class="d-block" id="cover" name="cover" accept="image/*">
                        <small class="form-text text-muted">
                            <c:if test="${not empty blog.cover}">
                                当前封面图: ${blog.cover}<br>
                                如果不想更改封面图，请不要选择新的图片
                            </c:if>
                        </small>
                    </div>
                </div>
                <!-- /.card-body -->

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">修改</button>
                </div>
            </form>
        </div>
        <!-- /.card -->

    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<style>
    /* 覆盖 Cherry Markdown 全屏模式的 z-index */
    .cherry.fullscreen {
        z-index: 1050 !important; /* 确保 z-index 足够大，覆盖其他元素 */
    }
</style>

<script>
    new Cherry({
        id: 'markdown-container',
        value: document.getElementById("content").value,
        toolbars: {
            // 定义顶部工具栏
            //toolbar: ['bold','italic','strikethrough','|','color','header','ruby','|','list','panel','detail'],
            // 定义侧边栏，默认为空
            sidebar: ['theme'],
            // 定义顶部右侧工具栏，默认为空
            toolbarRight: ['fullScreen', 'export'],
            // 定义选中文字时弹出的“悬浮工具栏”，默认为 ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', '|', 'size', 'color']
            bubble: false,
            // 定义光标出现在行首位置时出现的“提示工具栏”，默认为 ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'table', 'code']
            float: false,
        },
        callback: {
            afterChange: (text, html) => {
                document.getElementById('content').value = text;
            }
        },
        fileUpload: (file, callback) => {
            const formData = new FormData();
            formData.append('image', file);
            fetch('<%=request.getContextPath()%>/upload-image', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        callback(data.file.url);
                    } else {
                        console.error('图片上传失败:', data.message);
                        alert('图片上传失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('图片上传出错:', error);
                    alert('图片上传出错，请稍后重试');
                });
        },
    });
</script>

<%@ include file="partials/_end.jsp" %>